<script setup lang="ts">
import type { TickData } from "@/types/marketdata.types";
import { formatNumberText } from "@/utils/cell";
import { computed } from "vue";

defineOptions({
  name: "order-book"
});

const props = defineProps<{
  tick?: TickData;
  roundDigits: number;
}>();

const ask1 = computed(() =>
  formatNumberText(props.tick?.ask_price_1, {
    digits: props.roundDigits,
    separated: false
  })
);
const ask1Volume = computed(() =>
  formatNumberText(props.tick?.ask_volume_1, {
    digits: 0,
    separated: false
  })
);
const bid1 = computed(() =>
  formatNumberText(props.tick?.bid_price_1, {
    digits: props.roundDigits,
    separated: false
  })
);
const bid1Volume = computed(() =>
  formatNumberText(props.tick?.bid_volume_1, {
    digits: 0,
    separated: false
  })
);
</script>

<template>
  <div class="flex flex-col gap-1 text-sm">
    <div class="flex-bc rounded bg-green-50 p-1">
      <div>
        <span class="mr-1 p-0.5 text-nowrap text-green-700">卖</span>
        <span class="font-mono text-nowrap text-green-700">
          {{ ask1 }}
        </span>
      </div>
      <span class="ml-2 text-xs text-green-600">
        {{ ask1Volume }}
      </span>
    </div>
    <div class="flex-bc rounded bg-red-50 p-1">
      <div>
        <span class="mr-1 p-0.5 text-nowrap text-red-700">买</span>
        <span class="font-mono text-nowrap text-red-700">
          {{ bid1 }}
        </span>
      </div>
      <span class="ml-2 text-xs text-red-600">
        {{ bid1Volume }}
      </span>
    </div>
  </div>
</template>
